<template>
	<view>
		<view class="content">
			<view class="box">
				<view class="title">
					<view class="title-con" v-if="info.orderStatus == 0">待付款</view>
					<view class="title-con" v-else-if="info.orderStatus == 1">待接单</view>
					<view  class="title-con"v-else-if="info.orderStatus == 2">待发货</view>
					<view class="title-con" v-else-if="info.orderStatus == 3">待收货</view>
					<view class="title-con" v-else-if="info.orderStatus == 4">待使用</view>
					<view class="title-con" v-else-if="info.orderStatus == 5" style="color: #4cd909">已完成</view>
					<view class="title-con" v-else-if="info.orderStatus == 6" style="color: #606266">已取消</view>
					<view class="title-con" v-else-if="info.orderStatus == 7" style="color: #606266">已失效</view>
					<view class="title-con" v-else-if="info.orderStatus == 8">退款中</view>
					<view class="title-con" v-else-if="info.orderStatus == 9">已退款</view>
					<view  class="title-con"v-else-if="info.orderStatus == 10">未退款</view>
				</view>
				<view class="box-con">
					<view class="box-con-left">订单类型</view>
					<view class="box-con-right">普通订单</view>
				</view>
				<view class="box-con">
					<view class="box-con-left">配送方式</view>
					<view class="box-con-right" v-if="info.logisticsType == 0">快递</view>
					<view class="box-con-right" v-else-if="info.logisticsType == 1">配送</view>
					<view class="box-con-right" v-else-if="info.logisticsType == 2">快递</view>
					<view class="box-con-right" v-else-if="info.logisticsType == 3">自提</view>
					<view class="box-con-right" v-else-if="info.logisticsType == 4">到店消费</view>
					<view class="box-con-right" v-else-if="info.logisticsType == 5">上门服务</view>
					<view class="box-con-right" v-else-if="info.logisticsType == 7">货到付款</view>
				</view>
				<view class="box-con" v-if="info.orderLogistics.riderPhone">
					<view class="box-con-left">骑手手机号</view>
					<view class="box-con-right" v-if="">{{info.orderLogistics.riderPhone}}</view>
					
				</view>
				<view class="box-con" v-if="info.orderLogistics.expressName">
					<view class="box-con-left">快递公司</view>
					<view class="box-con-right" v-if="">{{info.orderLogistics.expressName}}</view>
					
				</view>
				<view class="box-con" v-if="info.orderLogistics.expressNo">
					<view class="box-con-left">物流单号</view>
					<view class="box-con-right" v-if="">{{info.orderLogistics.expressNo}}</view>
					
				</view>
				
				
				<view class="box-con" v-if="info.logisticsType != 3">
					<view class="box-con-left">收货人</view>
					<view class="box-con-right">{{ info.orderLogistics.receiverAddressJson.name }}</view>
				</view>
				<view class="box-con">
					<view class="box-con-left">联系方式</view>
					<view class="box-con-right">{{ info.orderLogistics.receiverAddressJson.mobile }}</view>
				</view>
				<view class="box-con" v-if="info.logisticsType != 3">
					<view class="box-con-left">收货地址</view>
					<view class="box-con-right">
						{{ info.orderLogistics.receiverAddressJson.province }} {{ info.orderLogistics.receiverAddressJson.city }}
						{{ info.orderLogistics.receiverAddressJson.district }} {{ info.orderLogistics.receiverAddressJson.address }}
						{{ info.orderLogistics.receiverAddressJson.houseNumber }}
					</view>
				</view>
				<view class="box-con" style="border-bottom: 1rpx dashed #f5f5f5;padding-bottom: 20rpx;">
					<view class="box-con-left">会员昵称</view>
					<view class="box-con-right">{{ info.userName }}</view>
				</view>
				<view class="" v-for="item in info.orderItemList" style="display: flex;align-items: center;padding: 20rpx;border-bottom: 1rpx dashed #f5f5f5;font-size: 26rpx;">
					<view class=""><image style="width: 100rpx;height: 100rpx;" :src="item.previewUrl" mode=""></image></view>
					<view class="" style="display: flex;flex-direction: column;margin-left: 20rpx;justify-content: space-between;">
						<view class="">{{ item.goodName }}</view>
						<view class="" style="display: flex;justify-content: space-between;width: 500rpx;padding-top: 20rpx;">
							<view class="" style="color: red;">￥{{ item.goodsPrice }}</view>
							<view class="">x{{ item.goodsNum }}</view>
						</view>
					</view>
				</view>

				<view class="box-con">
					<view class="box-con-left">商品合计</view>
					<view class="box-con-right">￥{{ info.totalMoney }}</view>
				</view>
				<view class="box-con">
					<view class="box-con-left">运费金额</view>
					<view class="box-con-right">￥{{ info.distributionFee }}</view>
				</view>
				<view class="box-con" style="border-bottom: 1rpx dashed #f5f5f5;padding-bottom: 20rpx;">
					<view class="box-con-left">实际支付</view>
					<view class="box-con-right" style="color: red;">￥{{ info.payMoney }}</view>
				</view>

				<view class="box-con">
					<view class="box-con-left">订单编号</view>
					<view class="box-con-right">{{ info.orderNo }}</view>
				</view>
				<view class="box-con">
					<view class="box-con-left">下单时间</view>
					<view class="box-con-right">{{ info.createTime }}</view>
					
				</view>
				<view class="box-con"  style="border-bottom: 1rpx dashed #f5f5f5;padding-bottom: 20rpx;">
					<view class="box-con-left">支付时间</view>
					<view class="box-con-right">{{ info.payTime }}</view>
				</view>
				<view class="box-con"  >
					<view class="box-con-left">订单备注</view>
					<view class="box-con-right">{{ info.orderRemark }}</view>
				</view>
				<view class="" v-if="info.orderRefundRecord">
					
					<view class="box-con" >
						<view class="box-con-left">申请金额</view>
						<view class="box-con-right">{{ info.orderRefundRecord.refundMoney }}</view>
					</view>
					<view class="box-con" >
						<view class="box-con-left">申请原因</view>
						<view class="box-con-right">{{ info.orderRefundRecord.applyRemark }}</view>
					</view>
					<view class="box-con" >
						<view class="box-con-left">申请时间</view>
						<view class="box-con-right">{{ info.orderRefundRecord.createTime }}</view>
					</view>
				</view>
				
				<!-- 
				<view class="box-con">
					<view class="box-con-left">2023-05-15 11:57:30</view>
					<view class="box-con-right">超时关闭</view>
				</view>
				<view class="box-con">
					<view class="box-con-left">2023-05-15 11:57:30</view>
					<view class="box-con-right">下单</view>
				</view> -->
				<u-modal :show="show" :title="title" :showCancelButton="true" @confirm="confirm(info)" @cancel="cancel(info)">
					<view class="slot-content"><u--input placeholder="请填写拒绝理由" border="surround" v-model="form.categoryName"></u--input></view>
				</u-modal>
				<view class="footer">
					<view class="butt" v-if="info.orderStatus == 8" @tap="show=true">订单退款</view>
					<view class="butt" v-if="info.orderStatus == 6 || info.orderStatus == 7" @tap="del(info)">删除订单</view>
					<!-- <view class="butt">
						补打小票
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getOrderInfoById, delOrder,shopApplyOrderRefund } from '../../../utils/api.js';
export default {
	data() {
		return {
			info: {},
			id: '',
			show:false,
			title: '退款',
		};
	},
	onLoad(option) {
		this.id = option.id;
	},
	onShow() {
		this.getOrderInfo();
	},
	methods: {
		getOrderInfo() {
			let data = {
				adminId: uni.getStorageSync('userInfo').id,
				userServiceToken: uni.getStorageSync('userInfo').userServiceToken,
				id: this.id
			};
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			
			getOrderInfoById(data).then(res => {
				if (res.code == 200) {
					uni.hideLoading();
					this.info = res.body;
					this.info.orderLogistics.receiverAddressJson = JSON.parse(this.info.orderLogistics.receiverAddressJson);
				}
			});
		},
		del(item) {
			console.log(item);
			let data = {
				ids: item.id
			};
			delOrder(data).then(res => {
				if (res.code == 200) {
					uni.showToast({
						icon: 'none',
						title: '删除成功'
					});
					setTimeout(() => {
						uni.navigateBack({delta:1})
					}, 500);
				}
			});
		},
		confirm(info){
			let data={
				orderNo:info.orderNo,
				pass:0
			}
			shopApplyOrderRefund(data).then(res=>{
				if (res.code == 200) {
					uni.showToast({
						icon: 'none',
						title: '退款成功'
					});
					this.show=false
					setTimeout(() => {
						this.getOrderInfo();
					}, 500);
				}else{
					uni.showToast({
						icon: 'none',
						title: res.msg
					});
					this.show=false
				}
				
			})
		},
		cancel(info){
			let data={
				orderNo:info.orderNo,
				pass:1
			}
			shopApplyOrderRefund(data).then(res=>{
				if (res.code == 200) {
					uni.showToast({
						icon: 'none',
						title: '拒绝退款'
					});
					this.show=false
					setTimeout(() => {
						this.getOrderInfo();
					}, 500);
				}else{
					uni.showToast({
						icon: 'none',
						title: res.msg
					});
					this.show=false
				}
			})
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.header {
	display: flex;
	align-items: center;
	padding: 20rpx;
	background-color: #fff;
	.button {
		width: 180rpx;
		height: 60rpx;
		.btn {
			color: #fff;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 26rpx;
			background-color: #6da7ff;
			text-align: center;
		}
	}
}
.tags {
	background-color: #fff;
	// /deep/.u-tabs__wrapper__nav__info{
	// 	padding: 0 80rpx;
	// }
}
.content {
	padding: 20rpx;
	.box {
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		position: relative;
		.title {
			padding: 40rpx;
			border-bottom: 1rpx solid #f5f5f5;
			.title-con{
				
					width: 100rpx;height: 100rpx;border-radius: 50rpx;
					border: 1rpx solid #999;
					font-size: 26rpx;
					display: flex;
					background-color: #fff;
					align-items: center;
					justify-content: center;
					color: #999;
					font-weight: 700;
					transform: rotate(-30deg);
					position: absolute;
					right: 20rpx;
					top: 30rpx;
					
			}
		}
		.box-con {
			display: flex;

			align-infos: center;
			padding: 20rpx 20rpx 0;
			font-size: 26rpx;
			.box-con-left {
				width: 130rpx;
				color: #999;
				margin-right: 30rpx;
			}
			.box-con-right {
				color: #1d1e23;
			}
		}

		.footer {
			padding: 20rpx;
			display: flex;
			align-infos: center;
			justify-content: flex-end;
			border-top: 1rpx solid #f5f5f5;
			margin-top: 20rpx;
			.butt {
				width: 180rpx;
				height: 50rpx;
				font-size: 26rpx;
				display: flex;
				justify-content: center;
				align-infos: center;
				color: #999;
				border: 1rpx solid #999;
				border-radius: 25rpx;
				margin: 0 0 0 30rpx;
				line-height: 50rpx;
			}
		}
	}
}
</style>
